<template>
	<div>
		<template v-if="userInfo.teamId">
			<mu-table :showCheckbox="false" ref="table">
			    <mu-thead>
			    	<mu-tr>
				        <mu-th width="20%">ID</mu-th>
				        <mu-th>姓名</mu-th>
				        <mu-th>操作</mu-th>
			    	</mu-tr>
			    </mu-thead>
			    <mu-tbody>
			      <mu-tr v-for="(list, i) in userList">
			        <mu-td>{{i+1}}</mu-td>
			        <mu-td>{{list.userName}}</mu-td>
			        <mu-td>
			        	<template v-if="userInfo.mobile == founder">
			        		<button class="my-btn green mr_5" @click="editMemberInfo(list.mobile)">编辑</button>
				        	<button class="my-btn danger">删除</button>
			        	</template>
			        </mu-td>
			      </mu-tr>
			    </mu-tbody>
			</mu-table>
			<mu-divider/>
			<mu-list style="padding: 15px 10px 0;">
			    <mu-raised-button label="+ 邀请新成员 +" fullWidth class="raised-button mt_10" style="height: 42px;"
			    	backgroundColor="#a4c639" @click="addNewMemberDialog = true"/>
			</mu-list>

			<!-- 添加新成员window -->
			<mu-dialog :open="addNewMemberDialog" @close="addNewMemberClose">
				<mu-text-field label="请输入对方帐号" labelFloat v-model="userMobile"
					:maxLength="11" :errorText="um_errorText" @textOverflow="um_Event" />
			    <mu-flat-button slot="actions" @click="addNewMemberSave" label="保存提交" primary/>
			</mu-dialog>
			<!-- 编辑成员信息 -->
			<mu-dialog :open="editMemberDialog" @close="editMemberClose">
				<mu-text-field label="手机号" labelFloat v-model="editMemberData.mobile" disabled />
				<mu-text-field label="姓名" labelFloat v-model="editMemberData.userName" />
				<mu-select-field v-model="editMemberData.job" label="职位" labelFloat :autoWidth="true">
				    <mu-menu-item v-for="(text, index) in jobList" :key="index" :value="text" :title="text" />
				</mu-select-field>
				<template v-if="editMemberData.mobile != founder">
					<mu-select-field v-model="editMemberData.leader" label="直属上司" labelFloat :autoWidth="true">
					    <mu-menu-item v-for="(leader, index) in userList" :key="index" :value="leader.mobile" :title="leader.userName" />
					</mu-select-field>
				</template>
				<mu-date-picker v-model="editMemberData.entryDate" label="入职日期" autoOk :maxDate="curDate"/>
			    <mu-flat-button slot="actions" @click="editMemberSave" label="保存提交" primary/>
			</mu-dialog>
		</template>
		
		<template v-else>
			<div class="noData">您必须先加入一个团队才可以使用本功能！</div>
		</template>

		<alerts-dialog :alertData="alertDialog"></alerts-dialog>
	</div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
export default {
	data(){
		return {
			alertDialog: {},
			//邀请成员相关
			addNewMemberDialog: false,
			userMobile: null,
			um_errorText: '',
			//编辑成员信息
			editMemberDialog: false,
			editMemberData: {
				userName: '',
				mobile: null,
				job: '',
				leader: 0,
				entryDate: moment(new Date()).format('YYYY-MM-DD')
			},
			jobList: [],
			founder: null
		}
	},
	computed: mapState(['userInfo', 'curDate', 'userList']),
	methods: {
	    //邀请新成员
	    addNewMemberClose(){	//关闭
	    	this.addNewMemberDialog = false;
	    },
	    addNewMemberSave(){	//邀请新成员保存
	    	if(!/^1[3|4|5|7|8]\d{9}$/.test(this.userMobile)){
	    		this.alertDialog = {
	    			openState: true,
	    			content: '请输入正确的手机号码！'
	    		}
	    		return false;
	    	}

	    	let uInfo = this.userInfo;
	    	axios.post($base + 'team/addNewMember', {
	    		mobile: this.userMobile,
	    		message: uInfo.userName + '邀请您加入' + uInfo.teamName + '，是否同意？',
	    		sendMobile: uInfo.mobile,
	    		sendUserName: uInfo.userName,
	    		teamId: uInfo.teamId,
	    		teamName: uInfo.teamName
	    	}).then(json => {
	    		if(json.data.error){
	    			this.alertDialog = {
		    			openState: true,
		    			content: json.data.error
		    		}
		    		return false;
	    		}else{
	    			this.alertDialog = {
		    			openState: true,
		    			content: '邀请成功！等待对方同意...'
		    		}
		    		this.addNewMemberDialog = false;
		    		this.userMobile = null;
	    		}
	    	}).catch(err => {
	    		console.log(err)
	    	})
	    },
	    um_Event(str){
	    	this.um_errorText = str ? '帐户长度超过限制，请修改！' : '';
	    },
	    //编辑成员信息
	    editMemberInfo(uid){	//弹窗、读取信息
	    	this.editMemberDialog = true;
	    	this.userList.forEach(e => {
	    		if(e.mobile == uid){
	    			this.editMemberData = e;
	    		}
	    	})
	    	console.log(this.editMemberData)
	    },
	    editMemberSave(){	//编辑保存
	    	let data = this.editMemberData,
	    		params = {
		    		mobile: data.mobile,
		    		userName: data.userName,
		    		job: data.job,
		    		leader: data.leader,
		    		entryDate: moment(data.entryDate).format('YYYY-MM-DD'),
		    		oType: 'setAll'
		    	};

		    switch(true){
		    	case params.mobile == params.leader:
		    		this.alertDialog = {
			    		openState: true,
			    		content: '不能把自己设置为上司！'
			    	}
			    	return false;

		    	default: break;
		    }

		    axios.post($base + 'users/infoChange', params).then(res => {
		    	this.editMemberDialog = false;
		    	this.alertDialog = {
		    		openState: true,
		    		content: '修改成功！'
		    	}
		    }).catch(err => {
		    	this.alertDialog = {
		    		openState: true,
		    		content: err
		    	}
		    })
	    },
	    editMemberClose(){	//关闭
	    	this.editMemberDialog = false;
	    },
	    get_jobList(){
	    	axios.post($base + 'team/teamInfo', {
	    		teamId: this.userInfo.teamId
	    	}).then(res => {
	    		this.jobList = res.data.jobList;
	    		this.founder = res.data.founder;
	    	}).catch(err => {
	    		this.alertDialog = {
		    		openState: true,
		    		content: '查询职位列表出错'
		    	}
		    	console.log(err)
	    	})
	    }
	},
	mounted(){
		this.get_jobList();
	}
}
</script>